<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Day7课后作业</title>
    <script src="../js/rest.js"></script>
    <style>
        span {
            user-select: none;
        }


        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="password" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone" name="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email" name="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>
<script>
    var user = document.getElementsByClassName('user')[0]
    var pwd = document.getElementsByClassName('pwd')[0]
    var phone = document.getElementsByClassName('phone')[0]
    var email = document.getElementsByClassName('email')[0]
    var submit = document.getElementsByClassName('submit')[0]


    user.onblur = function () {
        var userVal = user.value
        var tipsSpan = this.nextElementSibling
        var lReg = /^.{6,12}$/  //任意字符 6-12
        var sReg = /^[^0-9]/  //非数字开头
        var zReg = /[^\w$]/  // 存在非法字符
        if (!lReg.test(userVal)) {
            tipsSpan.textContent = "用户名需要在6-12位之间"
            tipsSpan.className = "user_tips error"
        } else if (!sReg.test(userVal)) { // 开头有问题 => 数字开头  sReg.test(user) === false
            tipsSpan.textContent = "用户名不能以数字开头"
            tipsSpan.className = "user_tips error"
        } else if (zReg.test(userVal)) { // 存在非法字符 zReg.test(user) === true 
            tipsSpan.textContent = "用户名由数字、字母、下划线、$组成"
            tipsSpan.className = "user_tips error"
        } else {

            ajax({
                type: 'get',
                url: 'http://43.138.81.225/demo/php/isExistUser.php',
                data: {
                    user: userVal
                },
                callback: function (data) {
                    console.log(data)
                    if (data.status) {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "user_tips right"
                    } else {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "user_tips error"
                    }
                }
            })
            //user传输数据判断
            // var xhruser = new XMLHttpRequest()
            // xhruser.open('get', 'http://43.138.81.225/demo/php/isExistUser.php?user=' + userVal, true)
            // xhruser.send()
            // xhruser.onreadystatechange = function () {
            //     if (xhruser.readyState == 4 && xhruser.status == 200) {
            //         var res = xhruser.responseText
            //         var data = JSON.parse(res)
            //         userFlag = data.status
            //         console.log(data)
            //         if (userFlag) {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "user_tips right"
            //         } else {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "user_tips error"
            //         }
            //     }
            // }
        }
    }
    pwd.onblur = function () {
        var pwdVal = pwd.value
        var reg = /^[\w$]{6,12}$/
        var tipsSpan = this.nextElementSibling
        if (reg.test(pwdVal)) {
            var isExistNum = /[0-9]/.test(pwdVal)
            var isExistBig = /[A-Z]/.test(pwdVal)
            var isExistSmall = /[a-z]/.test(pwdVal)
            var isExistSpe = /[_$]/.test(pwdVal)
            var level = isExistNum + isExistBig + isExistSmall + isExistSpe
            switch (level) {
                case 1:
                    tipsSpan.textContent = "密码强度:弱"
                    break
                case 2:
                    tipsSpan.textContent = "密码强度:中"
                    break
                case 3:
                    tipsSpan.textContent = "密码强度:强"
                    break
                case 4:
                    tipsSpan.textContent = "密码强度:超强"
                    break
            }
            tipsSpan.className = "pwd_tips right"
        } else {
            tipsSpan.textContent = "密码由数字、字母、下划线、$组成,6-12位"
            tipsSpan.className = "pwd_tips error"
        }
    }

    phone.onblur = function () {
        var phoneVal = phone.value
        var reg = /^1[3-9]\d{9}$/
        var tipsSpan = this.nextElementSibling
        if (reg.test(phoneVal)) {

            ajax({
                type: 'get',
                url: 'http://43.138.81.225/demo/php/isExistPhone.php',
                data: {
                    phone: phoneVal
                },
                callback: function (data) {
                    console.log(data)
                    if (data.status) {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "phone_tips right"
                    } else {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "phone_tips error"
                    }
                }
            })

            //phone
            // var xhrphone = new XMLHttpRequest()
            // xhrphone.open('get', 'http://43.138.81.225/demo/php/isExistPhone.php?phone=' + phoneVal, true)
            // xhrphone.send()
            // xhrphone.onreadystatechange = function () {
            //     if (xhrphone.readyState == 4 && xhrphone.status == 200) {
            //         var res = xhrphone.responseText
            //         var data = JSON.parse(res)
            //         console.log(data)
            //         phoneFlag = data.status
            //         if (phoneFlag) {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "phone_tips right"
            //         } else {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "phone_tips error"
            //         }
            //     }
            // }
        } else {
            tipsSpan.textContent = "请输入正确的手机号"
            tipsSpan.className = "phone_tips error"
        }
    }

    email.onblur = function () {
        var emailVal = email.value
        var reg = /^\w+@\w+\.\w+$/
        var tipsSpan = this.nextElementSibling
        if (reg.test(emailVal)) {

            ajax({
                type: 'get',
                url: 'http://43.138.81.225/demo/php/isExistEmail.php',
                data: {
                    email: emailVal
                },
                callback: function (data) {
                    console.log(data)
                    if (data.status) {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "email_tips right"
                    } else {
                        tipsSpan.textContent = data.message
                        tipsSpan.className = "email_tips error"
                    }
                }
            })


            // //email
            // var xhremail = new XMLHttpRequest()
            // xhremail.open('get', 'http://43.138.81.225/demo/php/isExistEmail.php?email=' + emailVal, true)
            // xhremail.send()
            // xhremail.onreadystatechange = function () {
            //     if (xhremail.readyState == 4 && xhremail.status == 200) {
            //         var res = xhremail.responseText
            //         var data = JSON.parse(res)
            //         emailFlag = data.status
            //         console.log(data)
            //         if (emailFlag) {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "email_tips right"
            //         } else {
            //             tipsSpan.textContent = data.message
            //             tipsSpan.className = "email_tips error"
            //         }
            //     }
            // }
        } else {
            tipsSpan.textContent = "邮箱格式有误"
            tipsSpan.className = "email_tips error"
        }
    }









    submit.onclick = function () {
        var userVal = user.value
        var pwdVal = pwd.value
        var phoneVal = phone.value
        var emailVal = email.value


        ajax({
            type: 'post',
            data: {
                user: userVal,
                pwd: pwdVal,
                phone: phoneVal,
                email: emailVal
            },
            url: 'http://43.138.81.225/demo/php/register.php',
            callback: function (data) {
                if (data.status) {
                    location.href = './login.html'
                }
            }

        })


        // var xhr = new XMLHttpRequest()
        // xhr.open('post', 'http://43.138.81.225/demo/php/register.php')
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        // xhr.send(`user=${userVal}&pwd=${pwdVal}&phone=${phoneVal}&email=${emailVal}`)
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState == 4 && xhr.status == 200) {
        //         var res = xhr.responseText
        //         var data = JSON.parse(res)
        //         console.log(data)
        //         location.href = './login.html'
        //     }
        // }
    }


</script>

</html>